<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>公共聊天室</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.js"></script>
    <link rel="stylesheet" type="text/css" rev="stylesheet" href="asaichat.css">
</head>

<body>
    <div id="app">
        <div class="asaichat">
            <div class="asaichat-top">{{language.title}}<b>{{urlid}}</b><audio id="asaispeak" type="audio/mpeg" autoplay></audio>
                <div class="chatshow">
                    <label for="id">{{language.formtips}}</label><input type="number" name="id" id="id" :maxlength="8" v-model="urlidx" @keyup.enter="chatshow()"><button @click="chatshow()">{{language.formshow}}</button>
                </div>
            </div>
            <div class="asaichat-main">
                <div class="asaichat-cr"></div>
                <div v-for="(item,key) in chatobj" :key="key" :class="fid==item.i?'asaichat-main-my':fid==item.o?'asaichat-main-myd':'asaichat-main-you'" @click.stop="itemspeak(item)">
                    <div class="asaichat-main-des">
                        <div @click.stop="fto=item.i;ftom=item.m;getfocus()"><b :title="item.i">{{item.m}}</b><i v-if="item.o" :title="item.o">{{item.n}}</i></div>{{item.t}}
                    </div>{{item.v}}
                </div>
                <div class="asaichat-cr"></div>
            </div>
            <div class="asaichat-form">
                <div class="asaichat-ge"></div>
                <div class="asaichat-form-name"><input type="text" :maxlength="language.sizeming" :placeholder="language.formmings" v-model="fming"></div>
                <div class="asaichat-ge"></div>
                <div class="asaichat-form-word">
                    <div v-show="fto" class="asaichat-to" :title="fto">{{language.wordto}}{{ftom}}<button @click="fto=null;ftom=null;getfocus()">×</button></div>
                    <input type="text" ref="say" :maxlength="language.sizeval" :placeholder="language.formword" v-model="fval" @keyup.enter="say()">
                </div>
                <div class="asaichat-ge"></div>
                <div class="asaichat-form-btn">
                    <div class="asaichat-speak" v-show="speaknow" :title="language.wordspeak">
                        <div class="asaichat-speak-ico"></div>
                    </div><button @click="say()">{{language.formbtn}}</button>
                </div>
                <div class="asaichat-ge"></div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    chaturl: 'php/asaichat.php?',
                    language: {
                        sizeming: 8,
                        sizeval: 100,
                        title: '公共聊天室',
                        formtips: '编号',
                        formshow: '进入',
                        formsizeerr: '名不要长过8，话不能长过100。',
                        formming: '游客',
                        formbtn: '发送',
                        formmings: '起个名',
                        formword: '请输入要说的话',
                        formempty: '有名、有话，才能说！',
                        wordspeak: '有人正在说话',
                        wordsay: '说',
                        wordmore: '我说：还有好多人说话了，我就不一一朗读了！',
                        wordto: "说话对象："
                    },
                    localsave: {
                        id: 'lid',
                        ming: 'lming',
                        urlid: 'lurlid',
                        key: 'lkey',
                        obj: 'lobj'
                    },
                    urlid: 9,
                    urlidx: 0,
                    fid: 108,
                    fto: null,
                    ftom: null,
                    fming: '',
                    fval: '',
                    chatclock: null,
                    chatkey: 0,
                    chatobj: null,
                    speaknow: false
                }
            },
            created() {
                this.urlidx = parseInt(localStorage.getItem(this.localsave.urlid));
                if (this.urlidx > 0) {
                    this.urlid = this.urlidx;
                } else {
                    this.urlidx = this.urlid;
                }
                this.readlocaldb(this.urlid);
            },
            mounted() {
                //console.log(666.6,localStorage.getItem(this.localsave.key + '-' + this.urlid) + '=' + this.chatkey, localStorage.getItem(this.localsave.obj + '-' + this.urlid), this.chatobj)
                this.chatclock = this.chatfresh();
            },
            watch: {
                chatkey: function() {
                    this.writelocaldb(this.urlid);
                },
                fming: function() {
                    localStorage.setItem(this.localsave.ming, this.fming);
                },
            },
            methods: {
                chataxios(url, ga, type, val = 0) {
                    //console.log(666.6,url, ga, type, val)
                    if (type == 8) { //添加
                        axios({
                                method: 'post',
                                url: url + ga + '/' + type,
                                data: val,
                                headers: {
                                    'Content-Type': 'application/json;charset=UTF-8',
                                }
                            })
                            .then(response => {
                                return response.data;
                            })
                            .catch(error => {
                                return error;
                            });
                    } else { //获取
                        axios.get(url + ga + '/' + type + '/' + val)
                            .then(response => {
                                if (response.data.key != val && response.data != val) {
                                    this.chatkey = response.data.key;
                                    let chatobjurl = response.data.obj;
                                    if (!chatobjurl[this.chatkey].o || this.fid == chatobjurl[this.chatkey].o || this.fid == chatobjurl[this.chatkey].i) {
                                        this.chatobj = Object.assign({}, this.chatobj, chatobjurl);
                                        this.asaispeak(chatobjurl);
                                        this.scroll();
                                    }
                                }
                            })
                            .catch(error => {
                                return error;
                            });
                    }
                },
                readlocaldb(lid) { //read localStorage
                    this.fid = localStorage.getItem(this.localsave.id);
                    if (!this.fid) {
                        this.fid = Date.now();
                        localStorage.setItem(this.localsave.id, this.fid);
                    }
                    this.fming = localStorage.getItem(this.localsave.ming);
                    if (!this.fming) {
                        this.fming = this.language.formming;
                    }
                    let localkey = parseInt(localStorage.getItem(this.localsave.key + '-' + lid));
                    if (localkey) {
                        let localobj = localStorage.getItem(this.localsave.obj + '-' + lid);
                        if (localobj) {
                            this.chatkey = localkey;
                            this.chatobj = JSON.parse(localobj);
                        }
                    }
                    if (this.chatobj) {
                        this.chataxios(this.chaturl, this.urlid, 0, this.chatkey);
                    }
                },
                writelocaldb(lid) { //write localStorage
                    //console.log(666.6,this.chatkey, this.chatobj)
                    if (this.chatkey > 0 && this.chatkey % 100 != 0) {
                        localStorage.setItem(this.localsave.key + '-' + lid, this.chatkey);
                        localStorage.setItem(this.localsave.obj + '-' + lid, JSON.stringify(this.chatobj));
                    } else {
                        localStorage.setItem(this.localsave.key + '-' + lid, 1);
                        localStorage.setItem(this.localsave.obj + '-' + lid, '');
                    }
                },
                asaispeak(wordobj) {
                    let words = '.';
                    let wordnum = 0;
                    for (let key in wordobj) {
                        wordnum += 1;
                        if (wordnum < 10) {
                            words = words + wordobj[key].m + '.' + this.language.wordsay + '.' + wordobj[key].v + '.';
                        }
                    }
                    if (wordnum > 10 || words.lengh > 200) {
                        words = words + '.' + this.language.wordmore;
                    }
                    this.speak(words);
                },
                itemspeak(itemobj) {
                    let words = itemobj.m + '.' + this.language.wordsay + '.' + itemobj.v + '.';
                    this.speak(words);
                },
                speak(word) {
                    let sdom = document.getElementById("asaispeak");
                    sdom.src = 'http://tts.baidu.com/text2audio/text2audio?lan=zh&ie=UTF-8&spd=6&text=' + word;
                    if (sdom) {
                        this.speaknow = true;
                        sdom.loop = false;
                        let _this = this;
                        sdom.addEventListener('ended', function() {
                            _this.speaknow = false;
                        }, false);
                    }
                },
                chatshow() {
                    this.chatobj = {};
                    this.chatkey = 0;
                    this.urlid = this.urlidx;
                    localStorage.setItem(this.localsave.urlid, this.urlid);
                    this.readlocaldb(this.urlid);
                    this.getfocus();
                },
                chatfresh() {
                    let _this = this;
                    window.setInterval(function() {
                        if (!_this.speaknow) {
                            _this.chataxios(_this.chaturl, _this.urlid, 0, _this.chatkey);
                        }
                    }, 2000);
                },
                scroll() {
                    this.$nextTick(() => {
                        window.scrollTo({
                            left: 0,
                            top: 999999,
                            behavior: "smooth"
                        });
                        document.body.scrollTop = document.body.scrollHeight;
                    });
                },
                say() {
                    if (this.fval === '#clear') {
                        this.chatobj = {};
                        this.chatkey = 0;
                        this.fval = '';
                        this.getfocus();
                    } else if (this.fming.length > this.language.sizeming || this.fval.length > this.language.sizeval) {
                        alert(this.language.formsizeerr);
                    } else if (this.fming && this.fval) {
                        let chatobjv;
                        if (this.fto) {
                            chatobjv = {
                                i: this.fid,
                                o: this.fto,
                                n: this.ftom,
                                m: this.fming,
                                v: this.fval,
                                t: this.gettime()
                            };
                        } else {
                            chatobjv = {
                                i: this.fid,
                                m: this.fming,
                                v: this.fval,
                                t: this.gettime()
                            };
                        }
                        if (this.chatobj == null) {
                            this.chatobj = {};
                        }
                        this.chatobj[(this.chatkey + 1)] = JSON.parse(JSON.stringify(chatobjv));
                        this.chatkey += 1;
                        this.fval = '';
                        this.chataxios(this.chaturl, this.urlid, 8, chatobjv);
                    } else {
                        alert(this.language.formempty);
                    }
                    this.getfocus();
                },
                getfocus() {
                    this.$nextTick(() => {
                        this.$refs["say"].focus();
                        this.scroll();
                    });
                },
                gettime() {
                    let myDate = new Date();
                    let year = myDate.getFullYear();
                    let month = myDate.getMonth() + 1;
                    let date = myDate.getDate();
                    let h = myDate.getHours();
                    let m = myDate.getMinutes();
                    let s = myDate.getSeconds();
                    return year + '-' + this.cvtime(month) + "-" + this.cvtime(date) + " " + this.cvtime(h) + ':' + this.cvtime(m) +
                        ":" + this.cvtime(s);
                },
                cvtime(s) {
                    return s < 10 ? '0' + s : s;
                }
            },
            beforeDestroy() {
                window.clearInterval(this.chatclock);
            }
        });
    </script>
</body>

</html>